<template>
  <div>
    <el-dialog
      top="30vh"
      width="600px"
      :show-close="false"
      :lock-scroll="true"
      :append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="data_visible"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="dialogDestroy"
    >
      <div class="main">
        <div class="progress">
          <b class="percentage">{{ data_progress.percentage }}%</b>
          <el-progress
            :show-text="false"
            :text-inside="true"
            :stroke-width="26"
            :percentage="data_progress.percentage"
          />
          <span class="tip">产品数据导入中</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ApiMMallWeb } from '@services/api';
import { UploadCompleteDialogService } from './upload-complete.dialog.service.js';

export default {
  name: 'UploadProgressDialogComponent',
  props: {
    query: {
      type: Object,
      default: function() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    fetcher: {
      type: Function,
      default: function() {}
    },
    useComplete: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      data_progress: {
        percentage: 0
      },
      data_visible: true
      // payload_data: null
    };
  },
  computed: {
    apiMMallWeb: function() {
      return new ApiMMallWeb(this.fetcher);
    }
  },
  watch: {
    query: {
      immediate: true,
      handler: (nv, ov) => {
        console.log(nv, '---result');
      }
    },
    visible: {
      immediate: true,
      handler: function(val, oldVal) {
        this.data_visible = val;
      }
    },
    'query.progress_val': function(val, oldVal) {
      console.log(val);
      this.data_progress.percentage = this.query.progress_val;
      if (val === 100) {
        this.dialogClose();
        this.$emit('complete', true);
        if (this.useComplete) {
          new UploadCompleteDialogService(this.fetcher)
            .create({
              // query: { ...this.query, ...this.payload_data },
              query: this.query,
              completeHandler: (data = {}) => {
                this.$emit('progressComplete', data);
              }
            })
            .mount();
        }
      }
    }
  },
  created() {
    console.log(this.query, 'query');
    // this.readllyUploadFile();
    // const timer = setInterval(() => {
    //   if (this.data_progress.percentage >= 100) {
    //     this.data_progress.percentage = 100;
    //     clearInterval(timer);
    //   } else {
    //     this.data_progress.percentage += 10;
    //   }
    // }, 300);
  },
  methods: {
    // // 上传进度回调
    // onUploadProgress(progressEvent) {
    //   console.log(progressEvent);
    //   if (progressEvent.lengthComputable) {
    //     let val = (progressEvent.loaded / progressEvent.total) * 100;
    //     val = parseInt(val);
    //     // 这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道
    //     // 因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败
    //     // 等响应回来时，再将进度设为100%
    //     if (val === 100) val = 90;
    //     this.data_progress.percentage = val;

    //     console.log(this.data_progress.percentage);
    //   }
    // },
    // readllyUploadFile() {
    //   this.fetcher({
    //     method: 'post',
    //     url: '/m-mall-web/api/v1/file/readFile',
    //     headers: { 'Content-Type': 'multipart/form-data' },
    //     onUploadProgress: this.onUploadProgress,
    //     data: this.query.file
    //   })
    //     .then(res => {
    //       const { code, payload, msg } = res.data;
    //       if (!Number(code)) {
    //         this.payload_data = payload;
    //         this.data_progress.percentage = 100;
    //       } else {
    //         this.$message.error(msg);
    //       }
    //     })
    //     .catch(() => {})
    //     .finally(() => {});
    // },
    dialogDestroy() {
      this.$emit('destroy', false);
      this.$emit('update:visible', false);
    },
    dialogClose() {
      this.data_visible = false;
    }
    // pullUploadStatusData() {
    //   const query = this.query;
    //   return this.apiMMallWeb.GetImportProgressOrderV1ApiPOST({
    //     query: {
    //       busId: query.busId,
    //       busType: query.busType,
    //       payload: this.payload_data
    //     }
    //   });
    // }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  display: none;
}

.progress {
  width: 100%;
  padding: 20px 0;
  margin: 0 auto;

  .percentage {
    color: #00f;
    line-height: 32px;
    font-size: 18px;
    text-align: center;
    display: block;
    margin-bottom: 20px;
  }

  .tip {
    color: #333;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    display: block;
  }
}
</style>
